<template>
  <!-- 搜索列表 -->
  <div class="search-info-list">
    <sort-title-vue :title="title" :isShowTitle="searchIsShow"></sort-title-vue>
    <!-- indexBar 栏 -->
    <index-bar-vue
      :indexBarData="indexBarData"
      :skipName="skipName"
      class="search-index-bar"
    ></index-bar-vue>
    <!-- 内容列表 -->
      <router-view></router-view>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import sortTitleVue from "../../components/sortTitle/sortTitle.vue";
import indexBarVue from "../../components/indexBar/indexBar.vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

// 接收传递数据
const searchTitle = store.state.m_search.searchTitle;

// 头部标题传给 sortTitle 组件
const title = `搜索 ${searchTitle}`;
const searchIsShow = false;

// indexBar 栏的数据
const indexBarData = reactive([
  "单曲",
  "歌手",
  "专辑",
  "视频",
  "歌单",
  "歌词",
  "博客",
  "声音",
  "用户",
]);

// 跳转的页面 name
const skipName = reactive([
  "searchSingle",
  "searchSinger",
  "searchAlbum",
  "searchVideo",
  "searchSongList",
  "searchLyric",
  "searchVoice",
  "searchAudio",
  "searchUser",
]);

</script>
<style lang="less">
@import url(../../assets/pagesStyle.css);

.search-index-bar {
  position: static;

  li {
    font-size: 14px;
  }

  // 样式覆盖
  .index-bar-active {
    font-size: 14px;
  }
  .index-bar-active::before {
    width: 26px;
  }
}
</style>

